<template>
	<div class="paymoney">
	<div class="paymoney-head">
			<a href="#/shopcart" class="pay">
				<i class="fa fa-angle-left"></i>支付页面
			</a>
		</div>
		<div class="address" v-if="nickName && address.length>0" >
			<a href="#/address" >
			<p class="shoupeople">  
				<span class="name">收货人:{{address[0].name}}</span>
				<span class="tel">电话:{{address[0].phone}}</span>
			</p>	 
			<p><span class="shouaddress">{{address[0].address}} {{address[0].addinfo}}</span></p>
			</a>
		</div>
		
		<div class="shoushop">
			<div class="shopList-cont" v-for="(item,index) in payshopMessage">
				<h4><i class="fa fa-moon-o"></i> {{item.author}}</h4>
				<div class="shop-xian">
					<div >
						
						<img :src="/taobao/+ item.shopImg" alt="" />
						<p class="shopName">{{item.title}}</p>
						<p class="shop-bor">
							<span>五折</span><span>七天退换</span>
						</p>
						<p class="shuliang">¥{{item.price}} <span>x{{item.buyCount}}</span></p>
						<!--<p class="jiage"> 小计: <span>¥{{item.price*item.buyCount}}</span></p>-->
					</div>
					<div class="gongyi">
						<p>公益宝贝 <span>成交后卖家将捐献0.02元给公益宝贝计划 <i class="fa fa-angle-right"></i></span></p>
						<p>配送方式 <span>快递 免邮 <i class="fa fa-angle-right"></i></span> </p>
						<p>运费险 <span>卖家送,确认收货前退货可赔 <i class="fa fa-angle-right"></i></span></p>
						<p>买家留言: <input type="text" placeholder="选填:对本次交易的说明"/></p>
					</div>
					<div class="buy">
						共<span class="buy-count">{{item.buyCount}}</span>件商品   <span>小计: <b>¥{{item.price*item.buyCount}}</b></span>
					</div>
					
				</div>
				
			</div>
		</div>
		<div class="zongji">
					<p>
						合计: <span>¥{{totalPrice}}</span>
						<a  @click="click">立即支付</a>
					</p>
		</div>
		<transition name="fade">
			<div class="paysuccess" v-show="show" @click="click">
			<h3>恭喜您,支付成功</h3>
			<h4>共收您<span>¥{{totalPrice}}</span></h4>
			<img src="../assets/ok-2.png" alt="" />
			<div class="payjixu">
				<a href="/">返回首页</a>
				<a href="#/collection">继续逛逛</a>
			</div>
		</div>
		</transition>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { mapState } from 'vuex'
	export default{
		data(){
			return{
				payshopMessage:[],
				show:false,
				address:[{}],
				
			}
		},
		methods:{
			payshop(){
				var that = this;
				axios.post('/taobao/payshopMessage').then(function(result){
					var res = result.data.result;
//					console.log(res);
					that.payshopMessage = res.data;				
				})
			},
			click(){
				this.show = !this.show;
				var that = this;
				axios.post('/taobao/success').then(function(respone){
					
				})
			},
			btns(){
				this.$router.go(-1);
			},
			getaddress(){
				var that = this;
				axios.post('/taobao/getaddress').then(function(respone){
//					console.log(123)
					var res =  respone.data.data
					that.address = res.address;
//					console.log(that.address)
				})
			},
			
		},
		mounted(){
			this.payshop(),
			this.getaddress()
		},
		computed:{
			totalPrice() {	
				var money = 0;
				this.payshopMessage.forEach(function(item) {					
						money += (item.price) * (item.buyCount);
				})
				return money;
			},
			...mapState(['nickName'])
		}
	}
</script>

<style scoped="">
	.fade-enter-active, .fade-leave-active {
		  transition: opacity .6s
		}
	.fade-enter, .fade-leave-to {
		  opacity: 0
	}
	.paymoney{
		margin-bottom: 300px;
		
	}
	.paymoney-head{
		height: 50px;
		background: orange;
		line-height: 50px;
		
	}
	.pay{
		color: #fff;
	}
	.pay i{
		margin-right: 10px;
		font-size: 22px;	
	}
	.address {
		padding: 0 15px;
		background: #eee;
		height: 70px;
		border-bottom: dashed 5px #ccc;
	}
	.address a{
		color: #555;
		
	}
	.shoupeople {
		padding:6px 0;
		font-size: 15px;
	}
	
	.tel{
		float: right;
	}
	.shouaddress{
		font-size: 15px;
	}
	.tishi{
		font-size: 12px;
		color: orangered;
		width: 100%;
		
	}
	.shop-xian {
		height: 110px;
		background: #EEF7FD;
		margin-bottom: 180px;
		position: relative;
		width: 100%;
	}
	.shopName{
		padding-top: 10px;
	}
	.shopList-cont h4{
		padding: 0 15px;
		margin: 5px 0;
		margin-top: 15px;
	}
	.shop-xian img {
		width: 80px;
		height: 80px;
		margin: 0 20px;
		margin-top: 10px;
		float: left;
	}
	.shop-bor span{
		color: orangered;
		border: solid 1px orangered;
		border-radius: 4px;
		margin-right: 5px;
		font-size: 10px;
	}
	.gongyi{
		margin-top: 15px;
		background: #fff;
		padding: 0 15px;
		font-size: 11px;
		line-height: 35px;
		border-bottom: solid 1px #eee;
	}
	.gongyi span{
		float: right;
		color: #888;
	}
	.gongyi input{
		width: 260px;
		float: right;
		line-height: 22px;
		border:none ;
		font-size: 12px;
		margin-top: 8px;
	}
	.shuliang{
		overflow: hidden;
		color: orangered;
		margin-top: 5px;
		font-size: 15px;
	}
	.shuliang span{
		float: right;
		color: #333;
		padding-right: 15px;
	}
	.buy{
		float: right;
		padding: 0 15px;
		font-size: 15px;
		line-height: 45px;
		
	}
	.buy b{
		color: orangered;
		border: solid 1px orangered;
		border-radius: 3px;
		padding: 2px 3px;
	}
	.zongji{
		padding-top: 10px;
		padding-right:15px ;	
		width: 100%;
		font-size: 15px;
		position: fixed;
		bottom: 60px;
	}
		.zongji p{
			float: right;
			
		}
		.zongji p a{
			color: #fff;
			background:  url(//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90) no-repeat;
			padding: 4px 10px;
			cursor: pointer;	
		}
		.zongji span{
			color: orangered;
			font-size: 17px;
			margin-right: 15px;
		}
		.paysuccess {
			cursor: pointer;
			border: solid 1px #ccc;
			height: 330px;
			position: fixed;
			bottom: 42px;
			width: 100%;
			background: #fff;
			text-align: center;
		}
		.paysuccess h3{
			margin-top: 20px;
		}
		.paysuccess h4{
			color: #666;
			margin-top: 15px;
		}
		.paysuccess h4 span{
			color: orangered;
			margin-left: 15px;
		}
		.paysuccess img{
			width: 110px;
			margin-top: 15px;
		}
		.payjixu{
			margin-top: 30px;
		}
		.payjixu  a{
			border: none;
			background:url(//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90) no-repeat ;
			padding: 3px 15px;
			color: #fff;
			margin:  0 20px;
			border-radius: 5px;
		}
</style>